﻿@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@namespace MudBlazor.Docs.Examples
@inject HttpClient httpClient

<MudDataGrid T="Element" Items="@Elements" ColumnResizeMode="@(_resizeColumn ? ResizeMode.Column : ResizeMode.Container)" RowsPerPage="5">
    <Columns>
        <PropertyColumn Property="x => x.Number" Title="Nr" />
        <PropertyColumn Property="x => x.Sign" Resizable="false" />
        <PropertyColumn Property="x => x.Name" />
        <PropertyColumn Property="x => x.Position" />
        <PropertyColumn Property="x => x.Molar" Title="Molar mass" />
        <PropertyColumn Property="x => x.Group" Title="Category" />
    </Columns>
    <PagerContent>
        <MudDataGridPager T="Element" PageSizeOptions=@(new int[] {5, 10, 20}) />
    </PagerContent>
</MudDataGrid>

<div class="d-flex flex-wrap mt-4">
    <div class="d-flex justify-start align-center">
        <p class="mud-typography mud-typography-body1 mud-inherit-text mr-2">ResizeMode.Container</p>
        <MudSwitch @bind-Value="_resizeColumn">ResizeMode.Column</MudSwitch>
    </div>
</div>

@code {
    private IEnumerable<Element> Elements = new List<Element>();
    private bool _resizeColumn;

    protected override async Task OnInitializedAsync()
    {
        Elements = await httpClient.GetFromJsonAsync<List<Element>>("webapi/periodictable");
    }
}